﻿<div>
<div style="padding:10px;">

<table style="width:100%;" cellpadding="3">
    <tr><td style="width:60px; color:#aaa;">● 全部选择</td><td><span class="sitem" id="allItem">全部</span>
    <div style="display:none;" id="friendAll">#{friendAll}</div>
    </td></tr>
    <tr><td style="color:#aaa;">● 分类选择</td><td>
    <!-- BEGIN categories --><span class="sitem right10 categoryItem" flist="#{c.FriendList}">#{c.Name}</span><!-- END categories -->
    </td></tr>
    <tr><td style="vertical-align:top;color:#aaa;">● 逐个选择</td><td>    
        <div id="friendList">
            <ul>
            <!-- BEGIN list --><li class="sitem">#{f.Name}</li><!-- END list -->
            </ul>
            <div class="clear"></div>
        </div>
        <div>#{page}</div>    
    </td></tr>
</table>


</div>
</div>

<style>

#friendList {}
.sitem {float:left;margin-right:10px; cursor:pointer; display:block; padding:1px 5px 2px 5px; color:Blue; }
.sitem:hover { background:#eee;}

</style>

<script>
_run( function() {

    $( '#friendList li' ).click( function() {
    
        var users = $(this).text();
        if( users=='' ) return;
    
        wojilu.tool.getBoxParent().fillUsers( users );    
    });
    
    $('.categoryItem').click( function() {
    
        var users = $(this).attr( 'flist' );
        if( users=='' ) return;
        
        wojilu.tool.getBoxParent().fillUsers( users );
    });
    
    $('#allItem').click( function() {
    
        var users = $('#friendAll').text();
        if( users=='' ) return;
        
        wojilu.tool.getBoxParent().fillUsers( users );
    });
    
    
});
</script>